import TodoItem from "./TodoItem";
import { useSelector, useDispatch } from "react-redux";
import { toggleAll } from '../store/actions/todos'
const TodoMain = () => {
  // 获取todos数据
  // @ts-ignore
  const todos = useSelector((state) => state.todos);
  // 根据todos得到是否全选
  const checkAll = todos.every((item) => item.done);
  const dispatch = useDispatch()
  return (
    <section className="main">
      {/* 全选按钮 */}
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        checked={checkAll}
        onChange={(e) => dispatch(toggleAll(e.target.checked))}
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {todos.map((item) => (
          <TodoItem key={item.id} {...item} />
        ))}
      </ul>
    </section>
  );
};

export default TodoMain;
